<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-09-15 14:58:04
 * @LastEditors: yuxi
 * @LastEditTime: 2023-07-19 09:32:00
-->
<template>
  <div class="map-container">
    <MiningMap :useContextMenu="true"  >
      <MiningTiandituLayer :ak="key" ></MiningTiandituLayer>
      <MiningVectorLayer @ready="ready" :featureStyle="style"
        layerName="量算" 
      >
        <MiningLineString v-if="lineFeature" :feature="lineFeature"></MiningLineString>
      </MiningVectorLayer>
      <MiningOverlay v-if="result.title" :position="result.position"> 
        <template #content>
          <div>{{result.title}}</div>
        </template>
      </MiningOverlay>
    </MiningMap>
    <div class="tools">
      <el-button size="mini" @click="startMeasure('length')">距离量算</el-button>
      <el-button size="mini" @click="startMeasure('area')">面积量算</el-button>

    </div>
  </div>
</template>

<script>
import MiningMap from 'mining-map/Map'
import MiningTiandituLayer from 'mining-map/Layers/TiandituLayer'
import { TiandituKey, CityCoordinates } from '@/config/config.js';
import { Draw, DoubleClickZoom  } from 'ol/interaction'; 
import MiningVectorLayer from 'mining-map/Layers/VectorLayer'
import MiningOverlay from 'mining-map/Overlay/Overlay';
import MiningLineString from 'mining-map/Features/LineString';

import {getArea, getLength} from 'ol/sphere.js';
import {LineString, Polygon} from 'ol/geom.js';
import Feature from 'ol/Feature'; 
import { Style, Stroke as StrokeStyle, Icon } from 'ol/style';

const formatLength = function (line) {
  const length = getLength(line, {
    projection: 'EPSG:4326'  

  });
  let output;
  if (length > 100) {
    output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';
  } else {
    output = Math.round(length * 100) / 100 + ' ' + 'm';
  }
  return output;
};

/**
 * Format area output.
 * @param {Polygon} polygon The polygon.
 * @return {string} Formatted area.
 */
const formatArea = function (polygon) {
  const area = getArea(polygon, {
    projection: 'EPSG:4326'  

  });
  let output;
  if (area > 10000) {
    output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km²';
  } else {
    output = Math.round(area * 100) / 100 + ' ' + 'm²';
  }
  return output;
};
 
const style = {
  'fill-color': 'rgba(255, 255, 255, 0.2)',
  'stroke-color': '#ffcc33',
  'stroke-width': 2,
  'circle-radius': 7,
  'circle-fill-color': '#ffcc33',
}
export default {
  name: 'Measure',
  title: '量算',
  parentTitle: '控件',
  components: {
    MiningMap,
    MiningTiandituLayer,
    MiningVectorLayer,
    MiningOverlay,
    MiningLineString
  },
  data () {
    return {
      key: TiandituKey,
      map: null,
      draw: null,
      type: 'length', // length area
      source: null,
      layer: null,
      points: [],
      lineFeature: null, 
      result: {
        title: '',
        position: []
      },
      style: new Style({
        stroke: new StrokeStyle({
          color: 'green',
          width: 2,
        })
      })
    }
  },
  methods: {
    ready ({map, layer}) {
      this.map = map 
      const dblClickInteraction = map
        .getInteractions()
        .getArray()
        .find(interaction => {
          return interaction.constructor.name === 'DoubleClickZoom'
      })
      map.removeInteraction(dblClickInteraction) // 取消双击放大事件
      this.layer = layer
    },
    // 取消量算
    cancelMeasure() {
      this.lineFeature = null
      this.result.title = ''
      this.result.position = undefined
    },
    // 开始量算
    startMeasure(type) {
      this.cancelMeasure() 
      this.draw = new Draw({
        source: this.source,
        type: type == 'area' ? 'Polygon' : 'LineString',
        style: style || undefined
      });
      this.draw.on('drawend', this.handleDrawEnd)
      this.draw.on('drawstart', this.handleDrawStart) 
      this.map.addInteraction(this.draw); 
    },
    // 结束量算
    endMeasure () {
      this.draw.set('active', false)
    },
    handleDrawEnd(evt) {
      this.lineFeature = evt.feature
      this.endMeasure()
    },
    handleDrawStart(evt) {
      let feature = evt.feature;
      this.lineFeature = null 
      let tooltipCoord = evt.coordinate; 
      // 监控绘制变化
      feature.getGeometry().on('change',   (evt) => {
       const geom = evt.target;
        let output;
        if (geom instanceof Polygon) {
          output = formatArea(geom);
          tooltipCoord = geom.getInteriorPoint().getCoordinates();
        } else if (geom instanceof LineString) {
          output = formatLength(geom);
          tooltipCoord = geom.getLastCoordinate();
        } 
        this.result = this.result || {}
        this.result.title = output
        this.result.position = tooltipCoord
    });
    } 
  } 
}
</script>

<style>
body,
html {
  padding: 0;
  margin: 0;
}

.map-container {
  width: 100%;
  height: 100vh;
  
}
.tools {
  position: absolute;
  left: 100px;
  top: 10px;
}
</style>